<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 商品管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/product.js" type="text/javascript" charset="utf-8"></script>


	</head>

	<body>
		<!--头部开始-->
		<div id="head-div">

		</div>
		<!--头部结束-->
		<script>
			$("#head-div").load("head.html");
		</script>

		<!-- 页面主体部分 -->
		<section class="container mt-2">
			<div class="h4 border-bottom">
				<span>商品管理</span>
				<small class="float-right">
					<a href="#modal-add-product" class="btn btn-sm btn-outline-success py-0" data-toggle="modal">新增商品</a>
				</small>
			</div>

			<!-- 商品名称搜索表单 -->
			<form action="" class="form-inline" id="ss-form">
				<div class="form-group form-group-sm mr-2">
					<label class="col-form-label col-form-label-sm">类别</label>
					<select class="col form-control form-control-sm" id="div-select" name="categoryid" >
						<option value="0">
							<div></div>
						</option>

					</select>
				</div>

				<div class="form-group form-group-sm">
					<label class="col-form-label col-form-label-sm">商品名称</label>
					<div class="input-group input-group-sm col px-0">
							<input type="text" class="form-control" placeholder="输入商品名称关键字..." name="name" value=""/>
							<input type="hidden"  name="categoryid" value=""/>
							<div class="input-group-append">
								<button class="btn btn-outline-secondary" id="ss-btn" type="button">
									<i class="glyphicon-zoom-in"></i>
									<span class="sr-only">搜索</span>
								</button>
							</div>

					</div>
				</div>
			</form>
			<!-- 商品数据 -->
			<table class="table table-sm table-hover table-striped">
				<thead class="thead-dark">
					<tr>
						<th>#</th>
						<th>名称</th>
						<th>单价(元)</th>
						<th>库存</th>
						<th class="d-none d-md-table-cell">分类</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">


				</tbody>
			</table>

		</section>

		<!-- 查看商品模态框部分 -->
		<div id="modal-show-product" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-zoom-in"></i>
							<span>查看商品</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<img src="../img/products/h.png" class="img-thumbnail" id="img"/>
									</div>
								</div>
								<div class="col-md">
									<div class="form-row">
										<label class="col-form-label pb-0">商品名称：</label>
										<div class="form-control-plaintext pt-0 pl-2 text-muted small" id="ProductName">

										</div>
									</div>

									<div class="form-row">
										<label class="col-form-label pr-4">单价：</label>
										<div class="col form-control-plaintext text-muted" id="price"></div>
									</div>

									<div class="form-row">
										<label class="col-form-label pr-2">库存量：</label>
										<div class="col form-control-plaintext text-muted" id="stock"></div>
									</div>

									<div class="form-row">
										<label class="col-form-label pb-0">所属类别：</label>
										<div class="form-control-plaintext pt-0 pl-2 text-muted">
											<span class="badge badge-secondary" id="ParentName"></span>
											<span class="badge badge-secondary" id="sonsName"></span>
										</div>
									</div>
								</div>
							</div>

							<div class="form-row">
								<label class="control-label pb-0">详情：</label>
								<div class="form-control-plaintext small pt-0" id="xiangqing">

								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //查看商品模态框部分结束 -->

		<!-- 新增商品模态框部分 -->
		<div id="modal-add-product" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>新增商品</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-product" action="" class="container-fluid">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<label>
											<img src="../img/products/a.png" class="img-thumbnail" id="img-sava"/>
										</label>
										<input type="file" accept="image/*" hidden="hidden" name="url" id="url-sava"/>
										<div class="text-muted">
											*点击设置图片
										</div>
									</div>
								</div>
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm">商品名称</label>
										<input class="form-control form-control-sm" required="required" name="name"/>
									</div>

									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">单价</label>
										<input class="col form-control form-control-sm" type="number" min="0.00" step="1.00" required="required" name="price"/>
									</div>

									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-2 mr-1">库存量</label>
										<input class="col form-control form-control-sm" type="number" required="required" name="stock"/>
									</div>

									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">类别</label>
										<select class="col form-control form-control-sm" id="parenName" name="categoryid">

										</select>
									</div>

								</div>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label col-form-label-sm">详情</label>
								<textarea class="form-control form-control-sm" rows="5" name="detail"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-product" type="button" id="sava-btn">新增商品</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //新增商品模态框部分结束 -->

		<!-- 编辑商品模态框部分 -->
		<div id="modal-edit-product" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-edit"></i>
							<span>编辑商品</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-product" action="" class="container-fluid">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<label>
											<img src="" class="img-thumbnail" id="img-update"/>
										</label>
										<input type="file" accept="image/*" hidden="hidden" name="url" id="url-updte"/>
										<div class="text-muted">
											*点击设置图片
										</div>
									</div>
								</div>
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm">商品名称</label>
										<input class="form-control form-control-sm" value="" required="required" id="update-name" name="name"/>
										<input type="hidden" class="form-control form-control-sm"  name="id"/>
									</div>
						
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">单价</label>
										<input class="col form-control form-control-sm" value="" min="0.00" step="1.00" required="required" id="update-price" name="price" />
									</div>
						
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-2 mr-1">库存量</label>
										<input class="col form-control form-control-sm" type="number" value="" required="required" id="update-stock" name="stock"/>
									</div>
						
									<div class="form-group form-row">
										<label class="col-form-label col-form-label-sm pr-4">类别</label>
										<select id="select-div" class="col form-control form-control-sm" name="categoryid">

										</select>
									</div>
						
								</div>
							</div>
						
							<div class="form-group form-row">
								<label class="col-form-label col-form-label-sm">详情</label>
								<textarea class="form-control form-control-sm" rows="5" id="update-detail" name="detail"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-product" type="button" id="update-btn">更新商品</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑商品模态框部分结束 -->

		<!-- //页面主体部分结束 -->

		<!--脚部分开始-->
		<div id="footer-div">

		</div>
		<!--脚部分结束-->
		<script>
			$("#footer-div").load("footer.html");
		</script>

	</body>

</html>
